<template>
  <el-row :gutter="24" style="margin: 20px 10px">
    <el-col :span="12" :xs="24">
      <tongji />
      <sysNews class="mt-3 mb-3" />
    </el-col>
    <el-col :span="12" :xs="24">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="k-title">快捷入口</div>
        </template>
        <el-row class="quick-enter">
          <el-col
            v-for="item in quickEnter"
            :key="item.iconid"
            :span="4"
            class="item"
            :xs="8"
            @click.stop="goPage(item)"
          >
            <img :src="localImageSrc(item.iconid)" alt="" />
            <div>{{ item.label }}</div>
          </el-col>
        </el-row>
      </el-card>
      <kNews style="margin-top: 10px" />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import tongji from "./modules/tongji.vue";
import sysNews from "./modules/sys-news.vue";
import kNews from "./modules/news.vue";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import { newestNotice } from "@/api/home";

defineOptions({
  name: "Welcome"
});

const quickEnter = ref([
  { label: "工具", iconid: "u64", path: "/tool/list" },
  { label: "设施", iconid: "u68", path: "/facility/index" },
  { label: "盘点记录", iconid: "u72", path: "/depot/stockTake" },
  { label: "检查记录", iconid: "u80", path: "/overhaul/inspect" },
  { label: "报修记录", iconid: "u84", path: "overhaul/repair" },
  { label: "维修记录", iconid: "u87", path: "/overhaul/maintain" },
  { label: "借还记录", iconid: "u76", path: "/record/list" },
  { label: "未归还", iconid: "u140", path: "/record/unReturn" },
  { label: "统计", iconid: "u181", path: "/statistics/board" }
]);
const router = useRouter();
const goPage = ({ path }) => {
  if (path) {
    router.push({ path });
  }
};

// 动态获取本地图片路径
const localImageSrc = (imgName: string) => {
  const url = new URL(`../../assets/home/index/${imgName}.png`, import.meta.url)
    .href;
  return url;
};
/* 通知 */
newestNotice({}).then(res => {
  let list = res.data as any[];
  if (!list.length) {
    return false;
  }
  let i = 0;
  do {
    let item = res.data[i];
    setTimeout(() => {
      ElNotification({
        title: item.noticeTitle,
        message: `<div>${item.noticeContent}<div><div>${item.createTime}</div>`,
        position: "bottom-right",
        duration: 1000 * 5,
        dangerouslyUseHTMLString: true,
        icon: "InfoFilled",
        customClass: "k-notification"
      });
    }, 500);
    i++;
  } while (i < list.length);
});
</script>

<style lang="scss" scoped>
.quick-enter {
  .item {
    display: inline-block;
    text-align: center;
    margin: 10px 0;
    cursor: pointer;
  }
  img {
    width: 48px;
  }
}
</style>
